<template>
   <nav-bar v-slot:default>用户登录</nav-bar>

  <div style="margin-top: 50px">
    <div style="text-align: center">
      <van-image
        width="100"
        height="100"
        src="https://img01.yzcdn.cn/vant/logo.png"
      />

      <van-form @submit="onSubmit">
        <van-field
          v-model="email"
          name="邮箱名"
          label="邮箱名"
          placeholder="邮箱名"
          :rules="[{ required: true, message: '请填写邮箱名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <div class="link-login" @click="$router.push({path:'/register'})">无账户，立即注册</div>
          <van-button round block type="info" color="#42b983" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import navBar from "components/common/navbar/NavBar";
import {ref,reactive, toRefs} from 'vue'
import {login} from 'network/user.js'
import { Notify,Toast } from 'vant';
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
export default {
  components: {
    navBar,
  },
  setup() {
      const router=useRouter()
      const store=useStore()
      const userinfo=reactive({
          email:'',
          password:'',
        
      })

      const onSubmit=()=>{
        login(userinfo).then(res=>{
            // 将token保存在本地
            console.log(res.access_token);
            window.localStorage.setItem('token',res.access_token)
            store.commit('setIsLogin',true)
            Toast.success('登录成功');
            userinfo.email=''
            userinfo.password=''
            setTimeout(()=>{
                router.go(-1)
            },1000)
        })
      }
      return{
         ...toRefs(userinfo),
         onSubmit
      }
  },
}
</script>
<style lang="less" scoped>
.link-login{
    font-size: 14px;
    margin-bottom: 20px;
    color:#42b983;
}
</style>